웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리의 선택자 요소에서 인접한 다른 요소를 선택하는 방법은 매우 다양합니다. 그렇기 때문에 이를 활용해 다른 요소를 쉽게 선택이 가능하죠. 대표적인 선택자 방법으로 부모나 자식요소를 선택하는 parent(), children() 등이 매우 자주 사용되죠.
오늘 알아볼 내용은 자식, 부모 요소의 선택이 아닌 다른 방법입니다. 바로 인접한 다음 요소 또는 이전 요소를 선택하는 방법에 대하여 알아볼까 합니다. 이 키워드는 바로 prev(), next()입니다.
# 제이쿼리 이전 또는 다음 요소를 선택하기
이를 사용하면 손쉽게 현재 요소의 이전 또는 다음 요소를 선택하도록 도와주는 매우 편리한 제이쿼리 api입니다. 제이쿼리의 경우 선택자 엔진이 매우 우수하기 때문에 이런 몇가지 api를 활용할 경우 ... 매우 쉽고 간결한 방법으로 원하는 요소의 선택이 가능합니다.prev() - 이전 요소를 선택하도록 반환
next() - 다음 요소를 선택하도록 반환
그럼 이 두가지 방버을 어떻게 활용할 수 있는지 예제를 통해 좀 더 자세히 알아보도록 하겠습니다. 아래 예제를 참고하시기 바랍니다.
# prev(), next() 사용 예제보기 예제와 함께 알아보는 방법이 코드를 익히는 가장 빠른 방법입니다. 만약에 아래와 같은 태그 코드가 있다고 생각해봅시다.
<div>
<button class="button1">다음 요소의 색을 변경하자. Click me!</button>
<button class="button2">이전 요소의 색을 변경하자. Click me!</button>
</div>
<button class="button1">다음 요소의 색을 변경하자. Click me!</button>
<button class="button2">이전 요소의 색을 변경하자. Click me!</button>
</div>
여기에는 div 태그 안에 두개의 button 태그 요소가 있습니다. 첫번째 button 태그를 클릭하면 다음 요소의 p태그 폰트 색이 바뀌고 두번째 button 태그를 클릭하면 첫번째 button태그인 이전 태그가 바뀌도록 변경하는 예제를 만들어보고자 합니다. 여기서 우리가 구현할 부분이 이전 요소와 다음 요소를 선택해 색을 변경하기 때문에 prev() 그리고 next() 키워드를 사용할 계획입니다. 그럼 이를 사용한 스크립트 코드는 아래와 같습니다.
@ prev-next.js
// 다음 요소에 대한 색상 변경
$('.button1').click(function() {
$(this).next().css('color', 'red');
});
// 이전 요소에 대한 색상 변경
$('.button2').click(function() {
$(this).prev().css('color', 'red');
});
$('.button1').click(function() {
$(this).next().css('color', 'red');
});
// 이전 요소에 대한 색상 변경
$('.button2').click(function() {
$(this).prev().css('color', 'red');
});
! 실제 구현된 코드 모습 그럼 실제로 위에 있는 button태그를 클릭하여 어떻게 동작하는지 확인해보세요!
정상적으로 색이 바뀌는 모습을 확인하실 수 있을 겁니다. 제이쿼리의 가장 강력한 기능 중 하나가 바로 선택자를 통한 DOM 컨트롤이 다소 쉽다는 점이 강점입니다.
참고로 이전 모든 요소를 선택하는 방법으로 prevAll(), 다음 모든요소를 설정하는 방법으로 nextAll()이 있으며 인접한 형제 요소들은 siblings()를 이용합니다. 이에 대하여도 꼭 알아두시면 좋습니다.
아래의 글도 찾고 계시지 않나요?
